<template>
  <div class="app-container boxFlex">
    <div class="content">
        <h1 class="mb-4 text-2xl">分类列表</h1>
        <el-button type="primary" size="default" class="mb-4" @click="handleCategoryAdd">新增分类</el-button>
        <el-tabs v-model="categoryKey" tab-position="left" class="tabsStyle mt-4" @tab-click="handleTabClick">
            <el-tab-pane v-for="item in categoryList"
                :key="item.id"
                :label="item.name"
                :name="String(item.id)">
                <div class="text-center border rounded-lg w-96 p-6">
                    <el-form :model="form" ref="cgyForm" :rules="rules" label-width="120px" :inline="false" size="normal">
                        <el-form-item :label="item.name" prop="name">
                            <el-input v-model="form.name" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button type="danger" @click="handleDelete1">删除</el-button>
                </div>
            </el-tab-pane>
        </el-tabs>
        
    </div>
    <div class="content">
        <h1 class="mb-4 text-2xl">标签列表</h1>
        <el-button type="primary" size="default" @click="handleLabelAdd">新增标签</el-button>
        <el-table :data="tableData" border stripe class="mt-4">
            <el-table-column prop="name" label="标签名"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-edit"
                    @click="handleUpdate(scope.row)"
                    plain
                    >编辑</el-button
                >
                <el-button
                    type="danger"
                    size="mini"
                    icon="el-icon-delete"
                    @click="handleDelete2(scope.row)"
                    plain
                    >删除</el-button
                >
                </template>
            </el-table-column>
        </el-table>
        
    </div>

    <!-- 删除分类弹框 -->
    <el-dialog
        title="删除分类"
        :visible.sync="deleteDialogVisible"
        width="435px"
        >
        <span style="">删除分类则分类下的标签一并删除，是否确认删除？</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="deleteDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmDelete">确 定</el-button>
        </span>
    </el-dialog>
    <!-- 删除标签弹框 -->
    <el-dialog
        title="删除标签"
        :visible.sync="deleteDialogVisible2"
        width="435px"
        >
        <span style="">是否确认删除标签？</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="deleteDialogVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="confirmDeleteLabel">确 定</el-button>
        </span>
    </el-dialog>

    <!-- 新增分类弹框 -->
    <el-dialog
        title="新增"
        :visible.sync="addDialogVisible"
        width="435px"
        @close="closeDialog"
        >
        <el-form :model="categoryForm" ref="categoryForm" :rules="labelRules" label-width="120px" :inline="false" size="normal">
            <el-form-item label="分类名称" prop="name">
                <el-input v-model="categoryForm.name" placeholder="请输入"></el-input>
            </el-form-item>
        </el-form>
        
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="onSubmitAdd">提交</el-button>
            <el-button @click="addDialogVisible = false">取 消</el-button>
        </span>
    </el-dialog>

    <!-- 新增/编辑标签弹框 -->
    <el-dialog
        :title="addOrEditTitle"
        :visible.sync="addOrEditDialogVisible"
        width="435px"
        @close="closeDialog"
        >
        <el-form :model="labelForm" ref="labelForm" :rules="labelRules" label-width="120px" :inline="false" size="normal">
            <el-form-item label="标签名称" prop="name">
                <el-input v-model="labelForm.name" placeholder="请输入"></el-input>
            </el-form-item>
        </el-form>
        
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="onSubmitLabel">提交</el-button>
            <el-button v-if="isAddLabel" @click="addOrEditDialogVisible = false">取 消</el-button>
            <el-button v-else type="danger" @click="handleDelete2">删除</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import {
    labelCategory, //分类列表
    labelList, //标签列表
    addOrUpdataLabelCategory, //分类编辑/新增/删除
    addOrUpdataLabel, //标签编辑/新增/删除
} from '@/api/homepageTABManagement/labelManagement'
export default {
    name: 'labelManagement',
    data() {
        return {
            deleteDialogVisible: false,
            deleteDialogVisible2: false,
            addOrEditDialogVisible: false,
            addOrEditTitle: '',
            isAddLabel: true,
            addDialogVisible: false,
            categoryKey: undefined,
            categoryList: [],
            form: {
                name: ''
            },
            rules: {
                name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
            },
            tableData: [],
            labelForm: {
                name: ''
            },
            categoryForm: {
                name: ''
            },
            labelRules: {
                name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
            },
            listQuery: {
                page: 1,
                perPage: 10
            },
        }
    },
    created() {
        this.labelCategoryList()
    },
    mounted() {
        
    },
    methods: {
        labelCategoryList() {
            // for (let key in this.listQuery) {
            //     this.listQuery[key] = this.listQuery[key] === "" ? undefined : this.listQuery[key];
            // }
            labelCategory().then(res => {
                if(res.code === 200) {
                    this.categoryList = res.data
                    console.log('categoryKey',this.categoryKey)
                    if(!Number(this.categoryKey)) {
                        console.log(1)
                        this.categoryKey = String(res.data[0].id)
                        this.form.name = res.data[0].name
                        this.form.category_id = res.data[0].id
                    }
                    // if(!this.form.category_id) {
                    //     this.form.category_id = res.data[0].id
                    // }
                    this.labelList({
                        category_id: this.form.category_id
                    })
                }
            })
        },
        labelList(data) {
            labelList(data).then(res => {
                if(res.code === 200) {
                    this.tableData = res.data
                }
            })
        },
        addOrUpdataLabelCategory(data, method) {
            addOrUpdataLabelCategory(data, method).then(res => {
                if(res.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '操作成功'
                    })
                    if(method === 'delete' || method === 'post') {
                        this.categoryKey = '0'
                    }
                    this.addDialogVisible = false
                    this.deleteDialogVisible = false
                    this.labelCategoryList()
                }else{
                    this.$message({
                        type: 'error',
                        message: res.message
                    })
                }
            })
        },
        addOrUpdataLabel(data, method) {
            addOrUpdataLabel(data, method).then(res => {
                if(res.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '操作成功'
                    })
                    this.addOrEditDialogVisible = false
                    this.deleteDialogVisible2 = false
                    this.labelList({
                        category_id: this.categoryKey
                    })
                }else{
                    this.$message({
                        type: 'error',
                        message: res.message
                    })
                }
            })
        },
        closeDialog() {
            this.labelForm = {
                name: ''
            }
            this.categoryForm = {
                name: ''
            }
            if (this.$refs['categoryForm']) {
                this.$refs['categoryForm'].clearValidate() // 清除整个表单的校验
            }
            if (this.$refs['labelForm']) {
                this.$refs['labelForm'].clearValidate() // 清除整个表单的校验
            }
        },
        onSubmit() { //编辑分类
            this.$refs['cgyForm'][0].validate((valid) => {
                if (valid) {
                    // console.log(this.categoryKey)
                    this.addOrUpdataLabelCategory(this.form, 'put')
                }
            })
        },
        onSubmitAdd() { //新增分类
            this.$refs['categoryForm'].validate((valid) => {
                if (valid) {
                    this.addOrUpdataLabelCategory(this.categoryForm, 'post')
                }
            })
        },
        handleDelete1() {
            this.deleteDialogVisible = true
        },
        handleDelete2(row) {
            console.log(row)
            if(row.id) {
                this.labelForm.label_id = row.id
            }
            this.deleteDialogVisible2 = true
        },
        onSubmitLabel() {
            this.$refs['labelForm'].validate((valid) => {
                if (valid) {
                    if(this.isAddLabel) {
                        this.addOrUpdataLabel(this.labelForm, 'post')
                    }else {
                        this.addOrUpdataLabel(this.labelForm, 'put')
                    }
                }
            })
        },
        handleUpdate(row) {
            console.log(row)
            this.addOrEditTitle = '编辑'
            this.isAddLabel = false
            this.labelForm.name = row.name
            this.labelForm.label_id = row.id
            this.addOrEditDialogVisible = true
        },
        confirmDelete() {
            // category_id
            this.addOrUpdataLabelCategory(this.form, 'delete')
        },
        confirmDeleteLabel() {
            this.addOrUpdataLabel(this.labelForm, 'delete')
        },
        handleTabClick(val) {
            console.log(val)
            this.form.name = val._props.label
            this.form.category_id = val._props.name
            this.labelList({
                category_id: val._props.name
            })
        },
        handleCategoryAdd() {
            this.categoryForm = {
                name: ''
            },
            this.addDialogVisible = true
        },
        handleLabelAdd() {
            this.addOrEditTitle = '新增'
            this.isAddLabel = true
            this.labelForm.category_id = this.categoryKey
            this.addOrEditDialogVisible = true
        }
    },
}
</script>

<style lang="scss" scoped>
.tabsStyle{
    height:calc(100vh - 200px);
}
.boxFlex{
    display: flex;
    .content {
        width: 40%;
    }
}
</style>